<template>
	<view :class="'page-section ' + (bgImg && bgImg.length > 0 ? 'background-img' : '')"
		:style="bgImg && bgImg.length > 0 ? 'background-image: url(' + imageUrl+bgImg + (addRandom ? '?'+now : '') + ')' : ''">
		<div class="front-img-wrapper">
			<image v-if="frontImg && frontImg.length>0" class="front-img" :src="frontImg" mode="widthFix" />

			<swiper :autoplay="true" interval="1500" current="currentIndex" @change="onChange" circular="true"
				@transition="onTransition" :style="'absolute:0px; top:0; left:0; width:100%;'+'height:'+height+'px;'">
				<block v-for="(item, index) in images">
					<swiper-item @click.stop="(e)=>onClickImage(e, index)">
						<image v-if="index==0" class="img" :src="imageUrl + item + (addRandom ? '?'+now : '')"
							@load="onLoadImageHeight" mode="widthFix" />
						<image v-else class="img" :src="imageUrl+item + (addRandom ? '?'+now : '')" mode="widthFix" />
					</swiper-item>
				</block>
			</swiper>
		</div>
		<view v-if="images.length>1" class="dot">
			<block v-for="(item, index) in images">
				<view v-if="index==currentIndex" :style="'width:'+curDotW+'rpx'" class="active"></view>
				<view v-else-if="index==targetIndex && targetIndex != -1" :style="'width:'+targetDotW+'rpx'"
					class="active"></view>
				<view v-else class="inactive"></view>
			</block>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		name: "xHorizontalImagesScroll",
		props: {
			imgs: {
				type: Array,
				default: [],
			},
			imgKey: {
				type: String,
				default: null,
			},
			bgImg: {
				type: String,
				default: '',
			},
			frontImg: {
				type: String,
				default: '',
			},
			heightPx: { //以像素为单位, 如果不指定高度，那就按照加载的图片的第一张高度为准
				type: Number,
				default: 0,
				// value: ()=>def.height
			},
			imageApi: {
				type: String,
				define: "",
			},
			addRandom: {
				type: Boolean,
				default: false,
			}
		},
		computed: {
			...mapState(['device'])
			// defaultHeight() {
			// 	console.log("defaultHeight=", def.height)
			// 	return ()=>def.height
			// }
		},
		data() {
			return {
				now: Date.now(),
				images: [],
				imageUrl: "",
				curDotWValue: 50,
				targetDotWValue: 10,
				curDotW: null,
				targetDotW: null,
				targetIndex: -1,
				currentIndex: 0,
				height: 0,
				firstLoadedImage: true,
			};
		},
		created() {
			this.imageUrl = this.imageApi.length == 0 ? this.$Config.imageUrl : this.imageApi
			if (this.imgKey) {
				this.images = this.imgs.map(item => {
					if (item.hasOwnProperty(this.imgKey)) {
						return item[this.imgKey]
					} else {
						return item
					}
				})
			} else {
				this.images = this.imgs
			}
		},
		mounted() {
			this.height = this.heightPx
		},
		methods: {
			onClickImage(e, index) {
				this.$emit("click", index)
			},
			onLoadImageHeight(e) {
				if (this.heightPx != 0) {
					return;
				}
				//获取可使用窗口宽度
				var width = this.device.screenWidth
				//获取图片实际高度
				var imgheight = e.detail.height
				//获取图片实际宽度
				var imgwidth = e.detail.width
				//计算等比swiper高度
				var height = width * imgheight / imgwidth

				this.height = height
				
				if (this.firstLoadedImage) {
					this.firstLoadedImage = false
					this.$emit("@loadedImages", {
						imgHeight: imgheight, //图片原始高度
						imgWidth: imgwidth, //图片原始宽度
						height: height, //图片适配高度
						width: width //图片适配宽度
					})
				}

			},
			onChange(e) {
				this.currentIndex = e.detail.current
			},
			onTransition(e) {
				let screenW = this.device.screenWidth; //px为单位
				let dx = Math.abs(e.detail.dx) //滑动偏移量，px为单位
				let pageOffset = dx % screenW //相对单页面偏移量
				let scaleW = pageOffset / screenW * (this.curDotWValue / 2 - this.targetDotWValue / 2); //单位

				let curDotW = (this.curDotWValue - scaleW * 2)
				let targetDotW = (this.targetDotWValue + scaleW * 2)

				let targetIndex = this.targetIndex;
				let currentIndex = this.currentIndex
				// if(pageOffset<35) {
				//   if (e.detail.dx > 0) {
				//     targetIndex = currentIndex + 1 >= this.imgs.length ? 0 : currentIndex + 1
				//   } else {
				//     targetIndex = currentIndex - 1 < 0 ? this.imgs.length : currentIndex - 1
				//   }
				// }
				if (parseInt(dx) % screenW == 0) {
					targetIndex = -1
					this.currentIndex = currentIndex
					// this.setData({
					// 	currentIndex
					// })
				}
				this.curDotW = curDotW
				this.targetDotW = targetDotW
				this.targetIndex = targetIndex
				// 	this.setData({
				// 		curDotW,
				// 		targetDotW,
				// 		targetIndex,
				// 	})
			}
		}

	}
</script>

<style lang="less" scoped>
	.page-section {
		position: relative;
		margin-top: -1px;
		margin-bottom: -1px;

		.dot {
			position: absolute;
			bottom: 50rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: center;
		}

		.active {
			background: rgb(66, 66, 66);
			width: 36rpx;
			height: 16rpx;
			border-radius: 8rpx;
			margin-right: 10rpx;
		}

		.inactive {
			background: rgb(127, 127, 127);
			/* 宽度 */
			width: 16rpx;
			height: 16rpx;
			border-radius: 8rpx;
			margin-right: 10rpx;
		}

		.img {
			width: 100%;
		}



		.front-img-wrapper {
			position: relative;

			.front-img {
				position: absolute;
				bottom: 0;
				width: 100%;
				z-index: 999;
			}
		}
	}


	.background-img {
		width: 100%;
		background-size: cover;
		background-repeat: no-repeat;
	}
</style>